<template>

  <div :style="'width:'+width+'px;height:'+height+'px;'">
    <div
      v-if="hideCopyright"
      :style="'position:absolute;left:0px;top:0px;width: '+width+'px;height: '+height+'px;clip: rect(0px   '+width+'px   '+height+'px   0px);overflow: hidden;border-radius:6px;'"
    >
      <img
        :src="url"
        :width="width"
        :height="height+15"
        v-on:error="loadDefault()"
        :style="{'height':(height+15)+'px'}"
      />
    </div>
    <img
      v-if="!hideCopyright"
      :data-src="url"
      :width="width"
      class="lazy lazy-fadeIn"
      v-on:lazy:error="loadDefault()"
    />
  </div>
</template>
<script>
export default {
  props: {
    ak: {
      type: String,
      default: "9z9F4p3KYO8u1WpHn4xGISYQoEATXAXt"
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    zoom: {
      type: Number,
      default: 17
    },
    longitude: {
      type: Number,
      required: true
    },
    latitude: {
      type: Number,
      required: true
    },
    hideCopyright: {
      type: Boolean,
      default: true
    },
    background: {
      type: String,
      default:
        ""
    }
  },
  computed: {
    url() {
      return (
        "http://api.map.baidu.com/staticimage/v2?ak=" +
        this.ak +
        "&center=" +
        this.longitude +
        "," +
        this.latitude +
        "&width=" +
        this.width +
        "&height=" +
        (this.hideCopyright ? this.height + 15 : this.height) +
        "&zoom=" +
        this.zoom
      );
    }
  },
  methods: {
    loadDefault() {
      this.$el.src = this.background;
    }
  }
};
</script>

